<template>
	<!-- 导航 -->
		<div class="routerNavBox">
			<div class="routerNavTitle" v-if='!isNoShowImg'>
				<a class="a_block" :href="homePage" target="_blank">
				 <img :src='src' style='height: 15px;'>
				</a>
			</div>
			<div class='router'>
				<!-- <a class="a_block" :href="Path+item?.url" target="_blank" v-for='item in router' >
				</a> -->
				<a class="a_block" :href="homePage" target="_blank">
					<span class='channelName channel_Name'>
					首页
					</span>
				</a>
					<a class="a_block" :href="Path+item?.url" target="_blank" v-for='(item, index) in router'>
						<span class='channelName'>
						&nbsp; / &nbsp;<span class='channel_Name' :class='index == (router.length-1)&& isNoShowImg? "activeChannel": (index==router.length-1)&& !isNoShowImg? "activeChannelW":""'>{{item.channelName}}</span>
						</span>
					</a>
				</div>
			</div>
				
			
		</div>
</template>

<script>
	export default {
		props: ['router', 'isNoShowImg'],
		data() {
			return {
			   src:'https://demo.jeecms.com/u/cms/www/2023/07/25/1683738962146955267.png',
				 Path:getRootPath(),
				 homePage:location.origin,
			}
		},
		created() {
		},
		methods:{
			hoverrouterNav(index){
				this.routerNavHoverIndex = index;
			}
		}
	}
</script>

<style scoped="scoped">
	.routerNavBox{
		width: 100%;
		padding: 12px 24px;
	  background: #2C2C2C;
		display:flex;
		align-items: center;
		box-sizing: border-box;
		
	}
	.routerNavTitle{
		margin-right: 24px;
	}
	.router{
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		width: 100%;
		display:flex;
		
	}
	.channelName{
		display: inline-block;
		color: #999999;
		
	}
	.channel_Name:hover{
		color:#FF3333;
	}
	.channel_Namehover{
			color:#FF3333;
	}
	
	.activeChannel{
		color:#333;
	}
	.activeChannelW{
		color: #fff;
	}
</style>